<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel批量测算 - 运费计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.tailwindcss.com">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .upload-area {
            transition: all 0.3s ease;
        }
        .upload-area.drag-over {
            background-color: rgba(59, 130, 246, 0.1);
            border-color: #3b82f6;
        }
        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .fade-in { animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans">
    <!-- 顶部导航栏 -->
    <header class="bg-blue-600 text-white shadow-md">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-3xl font-bold flex items-center">
                <i class="fa fa-file-excel-o mr-3"></i>Excel批量测算
            </h1>
            <p class="mt-2 opacity-90">上传Excel/CSV文件，批量计算大量运单的运费</p>
        </div>
    </header>

    <!-- 功能导航 -->
    <nav class="bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex overflow-x-auto py-4 space-x-6 md:space-x-8 whitespace-nowrap">
                <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors flex items-center">
                    <i class="fa fa-calculator mr-2"></i>基础计算
                </a>
                <a href="/manage" class="text-gray-600 hover:text-blue-600 transition-colors flex items-center">
                    <i class="fa fa-sliders mr-2"></i>费率维护
                </a>
                <a href="/excel" class="text-blue-600 font-medium border-b-2 border-blue-600 pb-2 flex items-center">
                    <i class="fa fa-file-excel-o mr-2"></i>批量测算
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <!-- 上传区域 -->
            <div class="bg-white rounded-lg shadow-md p-6 md:p-8 mb-8 fade-in">
                <h2 class="text-2xl font-bold text-gray-800 mb-6">文件上传</h2>
                
                <div id="uploadContainer">
                    <!-- 上传区域 -->
                    <div 
                        id="uploadArea" 
                        class="upload-area border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer mb-6"
                    >
                        <input 
                            type="file" 
                            id="fileInput" 
                            class="hidden" 
                            accept=".xlsx,.xls,.csv"
                        >
                        <i class="fa fa-cloud-upload text-5xl text-gray-400 mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-700 mb-2">拖放文件到此处或点击上传</h3>
                        <p class="text-sm text-gray-500 mb-4">支持 .xlsx, .xls, .csv 格式，最大50MB</p>
                        <button 
                            id="browseBtn" 
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
                        >
                            <i class="fa fa-folder-open mr-2"></i>浏览文件
                        </button>
                    </div>
                    
                    <!-- 已选择文件显示 -->
                    <div id="fileInfo" class="hidden mb-6 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-file-excel-o text-green-500 text-xl mr-3"></i>
                                <div>
                                    <p id="fileName" class="font-medium text-gray-800"></p>
                                    <p id="fileSize" class="text-sm text-gray-500"></p>
                                </div>
                            </div>
                            <button 
                                id="removeFileBtn" 
                                class="text-red-500 hover:text-red-700 transition-colors"
                            >
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 开始测算按钮 -->
                    <button 
                        id="startBtn" 
                        class="w-full md:w-auto px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition duration-150 ease-in-out font-medium hidden"
                    >
                        <i class="fa fa-play mr-2"></i>开始批量测算
                    </button>
                </div>
                
                <!-- 处理状态区域 -->
                <div id="processingArea" class="hidden">
                    <div class="text-center py-8">
                        <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
                        <h3 class="text-lg font-medium text-gray-700 mb-2">正在处理文件...</h3>
                        <p id="processingMessage" class="text-sm text-gray-500 mb-4">请耐心等待，处理时间取决于文件大小</p>
                        <p class="text-sm text-blue-600">任务ID: <span id="taskId" class="font-mono"></span></p>
                    </div>
                </div>
                
                <!-- 结果区域 -->
                <div id="resultArea" class="hidden">
                    <div class="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
                        <i class="fa fa-check-circle text-5xl text-green-500 mb-4"></i>
                        <h3 class="text-lg font-medium text-green-800 mb-2">处理完成！</h3>
                        <p class="text-sm text-green-700 mb-6">您的文件已处理完毕，可下载结果</p>
                        <a 
                            id="downloadLink" 
                            href="#" 
                            class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition duration-150 ease-in-out font-medium"
                            download
                        >
                            <i class="fa fa-download mr-2"></i>下载测算结果
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 格式说明 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-info-circle text-blue-500 mr-2"></i>文件格式说明
                </h3>
                
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">支持的文件格式</h4>
                        <ul class="list-disc list-inside text-gray-600 space-y-1 text-sm">
                            <li>Excel文件：.xlsx, .xls</li>
                            <li>CSV文件：.csv（建议使用UTF-8编码）</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">必填列（表头需包含以下关键词）</h4>
                        <ul class="list-disc list-inside text-gray-600 space-y-1 text-sm">
                            <li><strong>省份列</strong>：包含"省份"或"地区"关键词（如"收货省份"、"目的地地区"）</li>
                            <li><strong>重量列</strong>：包含"重量"或"kg"关键词（如"货物重量(kg)"、"weight"）</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">可选列</h4>
                        <ul class="list-disc list-inside text-gray-600 space-y-1 text-sm">
                            <li><strong>件数列</strong>：包含"件数"或"数量"关键词（如"包裹件数"、"piece count"），默认按1件计算</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-800 mb-2">示例数据格式</h4>
                        <div class="overflow-x-auto">
                            <table class="min-w-full border border-gray-200 text-sm">
                                <thead>
                                    <tr class="bg-gray-50">
                                        <th class="px-3 py-2 border-b">订单号</th>
                                        <th class="px-3 py-2 border-b">省份</th>
                                        <th class="px-3 py-2 border-b">重量(kg)</th>
                                        <th class="px-3 py-2 border-b">件数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="px-3 py-2 border-b">ORD-001</td>
                                        <td class="px-3 py-2 border-b">上海</td>
                                        <td class="px-3 py-2 border-b">1.5</td>
                                        <td class="px-3 py-2 border-b">1</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="px-3 py-2 border-b">ORD-002</td>
                                        <td class="px-3 py-2 border-b">北京</td>
                                        <td class="px-3 py-2 border-b">3.2</td>
                                        <td class="px-3 py-2 border-b">2</td>
                                    </tr>
                                    <tr>
                                        <td class="px-3 py-2">ORD-003</td>
                                        <td class="px-3 py-2">广州</td>
                                        <td class="px-3 py-2">0.8</td>
                                        <td class="px-3 py-2">1</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 处理说明 -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>使用说明
                </h3>
                
                <div class="space-y-4 text-gray-700">
                    <div class="flex">
                        <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium text-sm mr-3 mt-0.5">1</div>
                        <div>
                            <h4 class="font-medium">准备数据文件</h4>
                            <p class="text-sm mt-1">按照上述格式要求准备包含省份、重量信息的Excel或CSV文件</p>
                        </div>
                    </div>
                    
                    <div class="flex">
                        <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium text-sm mr-3 mt-0.5">2</div>
                        <div>
                            <h4 class="font-medium">上传文件</h4>
                            <p class="text-sm mt-1">点击上传区域或拖放文件到上传区域，支持最大50MB的文件</p>
                        </div>
                    </div>
                    
                    <div class="flex">
                        <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium text-sm mr-3 mt-0.5">3</div>
                        <div>
                            <h4 class="font-medium">开始测算</h4>
                            <p class="text-sm mt-1">点击"开始批量测算"按钮，系统将自动处理文件中的所有数据</p>
                        </div>
                    </div>
                    
                    <div class="flex">
                        <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium text-sm mr-3 mt-0.5">4</div>
                        <div>
                            <h4 class="font-medium">下载结果</h4>
                            <p class="